<template>
  <div class="wrapper" :class="[headerScroll]" ref='guess'>
	 <ul>
		 <li v-for="(item,index) of list" :key="index">
			 <span class="line" @click='ShowClass(index)' :class="[Num == index?'active':'']">{{item.tabs}}</span>
		 </li>
	 </ul>
  </div>
</template>

<script>
export default {
  name: 'travel_homeGuess',
  props:{
	  moveNum:0
  },
  data(){
	  return{
		  list:[
			  {
				  tabs:'猜你喜欢',
				  
			  },
			  {
				  tabs:'热门活动',
			  },
		  ],
		  Num:-1,
		  active:'',
		  headerScroll:'',
		  isShowClass:'',
		  isMoveNav:''
	  }
  },
  methods:{
	  ShowClass(index){//点击页面滑动
		  this.Num=index
		  this.$emit('@gotoClick',this.Num)
		  if(index===1){
			  let bodyHeight=document.body.clientHeight
			  window.scrollTo(0,bodyHeight-this.getWindowHeight()) 
		  }else{
			  window.scrollTo(0,this.moveNum-50) 
		  }
	  },
	  srollChange(){
		  let scrollHeight=document.documentElement.scrollTop
		  let bodyHeight=document.body.scrollHeight
		if(scrollHeight>this.moveNum-50){//Nav是否悬浮
			 this.headerScroll='headerScroll'
		 }else{
			 this.headerScroll=''
		 }
		 if(scrollHeight>=bodyHeight-this.getWindowHeight()){//判断是否到达页面的底部
			 this.Num=1
		 }else{
			 this.Num=0
		 }
	  },
	  getWindowHeight(){//窗口的高度
		 let windowHeight = 0;
		　　　　if(document.compatMode == "CSS1Compat"){//标准兼容模式开启
		　　　　 　　windowHeight = document.documentElement.clientHeight;
		　　　　}else{//标准兼容模式关闭
		　　　　　　windowHeight = document.body.clientHeight;
		　　　　}
		　　　　return windowHeight;
		 }
  },
  mounted(){
	  this.active='active'
	  this.Num=this.$store.state.isClickNum
	  window.addEventListener('scroll',this.srollChange)
  },
  beforeDestroy() {
		window.removeEventListener("scroll",this.srollChange)
	},
  watch:{
	  Num(){
		  this.$store.commit('isChangeNum',this.Num)
	  }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped>
.wrapper
	width:100%
	border-bottom:1px solid #ccc
	height:1rem
	ul
		width:90%
		margin:0 auto
		display:flex
		li
			-webkit-box-flex: 1;
			-ms-flex: 1;
			flex: 1;
			text-align: center;
			.line
				line-height:1rem
				text-align:center
				font-size:0.35rem
				position: relative;
			.active
				color:#23beae
			.active:after
				display: block;
				content: "";
				width: 100%;
				height: 3px;
				background: #23beae;
				position: absolute;
				bottom: -0.3rem;
				left: 0;
				border-radius: 2px;
.headerScroll
	position:fixed
	top:0.8rem
	left:0
	z-index:100
	background:#fff
	width:100%
</style>
